<template>
  <div class="page1">
    <div class="button">
      <div class="actived">全部</div>
      <div>足球</div>
      <div>篮球</div>
      <div>足球比分</div>
      <div>篮球比分</div>
    </div>
    <div class="title">
      <div>赛事</div>
      <div>时间</div>
      <div>状态</div>
      <div>主队</div>
      <div class="t_bf">比分</div>
      <div>客队</div>
      <div>频道</div>
    </div>
    <div class="time">
      <div>{{time}}</div>
      <div>{{xq}}</div>
    </div>
    <div class="body">
      <box-item v-for="(data,index) in '43213321111112312'" :key="index" :zb="+data"></box-item>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    boxItem: () => import("@/components/boxitem")
  },
  data() {
    return {
      time: "2020年02月08日",
      xq: "星期六"
    };
  }
};
</script>
<style lang="less" scoped>
@btn-color: #917554;

.page1 {
  width: 1000px;
  margin: 0 auto;
  > div {
    margin-top: 10px;
  }
  .button {
    display: flex;
    .actived {
      color: #eeeeee;
      background-color: @btn-color;
    }
    > div {
      font-size: 1rem;
      margin-right: -1px;
      padding: 5px 10px;
      border: 1px solid @btn-color;
      color: @btn-color;
      background-color: #eeeeee;
      &:hover {
        color: #eeeeee;
        background-color: @btn-color;
      }
    }
  }
  .title {
    display: flex;
    background-color: #dbd6c7;
    line-height: 2rem;
    > div {
      width: 8rem;
      font-size: 12px;
    }
    .t_bf {
      color: @btn-color;
    }
  }
  .time {
    display: flex;
    > div {
      font-size: 14px;
      margin: 0 1rem;
    }
    .t_bf {
      color: @btn-color;
    }
  }
  .body {
    box-shadow: 0px 0px 4px 0px #8888;
    > div {
      padding: 10px 5px;
    }
  }
}
</style>